<template>
	<view class="wrapp">
		<view class="wrapp-top">
			<view class="wrapp-top-box">
				<view class="txt">账户资产</view>
				<view class="num">
					￥ {{money}}
				</view>
				<view class="btn" @click="navTo('/inside/my/wallet-form')">
					我要提现
				</view>
			</view> 
			
			<view class="wrapp-top-foot flex">
				<view class="l" @click="tipClick('1')">
					积分兑换金额
				</view>
				<view class="r" @click="tipClick('2')">
					金额兑换积分
				</view>
			</view>
			
		</view>
		<view class="emety"></view>
		
		<view class="wrapp-list">
			<view class="wrapp-tab flex">
				<view :class="['nav',{'act': tabIndex == index}]" v-for="(item,index) in tab" :key="index" @click="tabClick(index)">
					<view class="title">{{item}}</view>
					<view class="line" v-if="tabIndex == index"></view>
				</view>
			</view>
			
			<view :class="['item flex',{'pd48': tabIndex != 0}]" v-if="tabIndex == 0" v-for="(item,index) in list" :key="index">
				<view class="item-l">
					￥{{item.amount}}
				</view>
				
				<view class="item-r">
					<view class="mb">{{item.withdrawlTime}}
					
					 <span v-if="item.show_state === '提现审核中'" class="re1">{{item.show_state}}</span>
					 <span v-else-if="item.show_state === '提现成功'" class="re">{{item.show_state}}</span>
					 <span v-else class="re2">{{item.show_state}}</span>

					 </view>
					<!-- <view>2018-11-12-24 12:32 到账</view> -->
				</view>

			</view>
			
			<view :class="['item flex',{'pd48': tabIndex != 0}]" v-if="tabIndex == 1" v-for="(item,index) in list" :key="index">
				<view class="item-l">
					{{item.val}}积分
				</view>
				<view class="item-r">
					<view>{{item.createtime}} 兑换</view>
				</view>
			</view>
			
			<view :class="['item flex',{'pd48': tabIndex != 0}]" v-if="tabIndex == 2" v-for="(item,index) in list" :key="index">
				<view class="item-l">
					￥{{item.val/item.rate}}
				</view>
				<view class="item-r">
					<view>{{item.createtime}} 兑换</view>
				</view>
			</view>
			
			<view v-if="list.length ==0" class="cm-none-tips">
				<image src="../../static/images/none_tip.png" mode="aspectFit"></image>
				<view>暂无信息~</view>
			</view>
			
		</view>
		
		
		<u-popup :show="show" @close="show = false" mode="center" round="40" :safeAreaInsetBottom="false">
			<view class="pop">
				<view class="pop-txt">
					积分兑换金额
				</view>
				<view class="pop-close">
					<u-icon name="close" color="#B8B8B8" size="32" @click="show = false"></u-icon>
				</view>
				<view class="pop-inp">
					<u--input
					    placeholder="请输入积分"
					    border="surround"
					    v-model="value"
						shape="circle"
						type="number"
						placeholderStyle="text-align: center;"
					  ></u--input>
				</view>
				<view class="pop-dec">
					可兑换<text>{{value/100}}</text>金额
				</view>
				<view class="pop-btn">
					<u-button type="primary" shape="circle" text="确认兑换" color="#DADADA" v-if="!value"></u-button>
					<u-button type="primary" shape="circle" text="确认兑换" color="#FF7D01" @click="submit('1')" v-else></u-button>
				</view>
				<view class="pop-foot">
					积分兑换率 <text>{{integral}}积分=1元现金</text>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show2" @close="show2 = false" mode="center" round="40" :safeAreaInsetBottom="false">
			<view class="pop">
				<view class="pop-txt">
					金额兑换积分
				</view>
				<view class="pop-close">
					<u-icon name="close" color="#B8B8B8" size="32" @click="show2 = false"></u-icon>
				</view>
				<view class="pop-inp">
					<u--input
					    placeholder="请输入金额"
					    border="surround"
					    v-model="value2"
						shape="circle"
						type="number"
						placeholderStyle="text-align: center;"
					  ></u--input>
				</view>
				<view class="pop-dec">
					可兑换<text>{{value2*100}}</text>积分
				</view>
				<view class="pop-btn">
					<u-button type="primary" shape="circle" text="确认兑换" color="#DADADA" v-if="!value2"></u-button>
					<u-button type="primary" shape="circle" text="确认兑换" color="#FF7D01" @click="submit('2')" v-else></u-button>
				</view>
				<view class="pop-foot">
					积分兑换率 <text>1元现金={{integral}}积分</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import Auth from '@/utils/auth';
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';
	export default {
		data() {
			return {
				tab: ["提现记录",'积分兑换记录','金额兑换记录'],
				tabIndex: 0,
				list: [],
				show: false,
				value: '',
				money: 0,
				integral: 0,
				rate:0,
				
				show2: false,
				value2: '',
			};
		},
		onShow() {
			this.getData() 
			
		},
		methods: {
			
			getData() {
				
	
				Rest.post(Api.ZHUIGE_My_WalletList, {}).then(res => {
					this.money = res.data.user_money
					this.integral = res.data.rate ?? 0
				}, err => {
					console.log(err)
				});
				
				if(this.tabIndex == 0) {
					this.list = []
					Rest.post(Api.ZHUIGE_My_WalletList, {}).then(res => {
						this.list = res.data.withdrawal_list
					}, err => {
						console.log(err)
					});
				} else {
					this.list = []
					let obj = {
						type: this.tabIndex == 1?7:8
					}
					
					Rest.post(Api.ZHUIGE_My_CashList, obj).then(res => {
						this.list = res.data.exchange_list
					}, err => {
						console.log(err)
					});
				}
				
			},
			navTo(url) {
				Util.openLink(url)
			},
			tabClick(i) {
				this.tabIndex  = i
				this.getData()
			},
			tipClick(i) {
				if(i == "1") {
					this.show = true
				} else {
					this.show2 = true
				}
			},
			submit(type) {
				if(type == "1") {
					if(this.value) {
						Rest.post(Api.ZHUIGE_My_Points_Redeem_Money, {'value':this.value}).then(res => {
							if(res.code==0){
								this.getData() 
								uni.$u.toast('兑换成功')
								this.show = false
								
							}else{
								uni.$u.toast(res.msg)
								
							}
							
						}, err => {
							console.log(err)
						});
					}
					
				} else {
					if(this.value2) {
						Rest.post(Api.ZHUIGE_My_Money_Redeem_Points, {'value':this.value2}).then(res => {
							if(res.code==0){
								this.getData() 
								uni.$u.toast('兑换成功')
								this.show2 = false
								
							}else{
								uni.$u.toast(res.msg)
							}
						}, err => {
							console.log(err)
						});
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.cm-none-tips {
		text-align: center;
		padding: 100rpx;
	}
	.cm-none-tips image {
		height: 200rpx;
		width: 200rpx;
		margin-bottom: 30rpx;
	}
	.cm-none-tips view {
		font-size: 24rpx;
		font-weight: 300;
		color: #999999;
	}
	.pop {
		width: 550rpx;
		padding: 38rpx 60rpx;
		position: relative;
		&-close {
			position: absolute;
			right: 28rpx;
			top: 20rpx;
		}
		&-txt {
			font-weight: 700;
			font-size: 38rpx;
			margin-bottom: 34rpx;
			text-align: center;
		}
		&-inp {
			margin-bottom: 30rpx;
		}
		&-dec {
			margin-bottom: 50rpx;
			text-align: center;
			text {
				color: #FF7D01;
			}
		}
		&-btn {
			margin-bottom: 34rpx;
		}
		&-foot {
			text-align: center;
			text {
				color: #FF7D01;
				margin-left: 10rpx;
			}
		}
	}
	.wrapp {
		.emety {
			height: 12rpx;
			background-color: #F2F2F2;
		}
		&-top {
			padding: 40rpx 20rpx 42rpx;
			border-bottom: 2rpx solid #eee;
			.custom-style {
				color: #ff0000;
				width: 400rpx;
			}
			&-box {
				margin-bottom: 40rpx;
				padding: 32rpx;
				border: 1rpx solid #fff;
				border-radius: 16rpx;
				box-shadow: 2rpx 0 10rpx rgba(0, 0, 0, 0.25);
				position: relative;
				overflow: hidden;
				.txt,.foot {
					color: #999;
					font-size: 24rpx;
				}
				.num {
					margin: 10rpx 0 32rpx 0;
					padding: 32rpx 0;
					color: #000;
					font-weight: 700;
					font-size: 60rpx;
				}
				.btn {
					position: absolute;
					width: 126rpx;
					background-color: #69B44D;
					border-radius: 40rpx;
					color: #fff;
					padding: 10rpx 32rpx;
					right: -32rpx;
					top: 20rpx;
					font-size: 28rpx;
				}
			}
			// .btn {
			// 	height: 90rpx;
			// 	width: 100%;
			// 	background-color: #FC5542;
			// 	color: #fff;
			// 	font-size: 30rpx;
			// 	text-align: center;
			// 	border-radius: 50px;
			// 	line-height: 90rpx;
			// }
			&-foot {
				justify-content: space-around;
				color: #fff;
				font-size: 24rpx;
				.l {
					padding: 24rpx 76rpx;
					background-color: #FFAD4D;
					border-radius: 50rpx;
					border-radius: 50rpx;
				}
				.r {
					padding: 24rpx 76rpx;
					background-color: #FC5542;
					border-radius: 50rpx;
					border-radius: 50rpx;
				}
			}
		}
		&-list {
			.item {
				justify-content: space-between;
				padding: 32rpx 0;
				margin: 0 32rpx;
				align-items: center;
				border-bottom: 2rpx solid #eee;
				&-l {
					font-size: 36rpx;
					font-weight: 700;
				}
				&-r {
					
					.mb {
						color: #999;
						margin-bottom: 10rpx;
						
					}
					.re{
						margin-left: 12rpx;
						
						color:forestgreen;
					}
					.re1{
						margin-left: 12rpx;
						
							color: #FC5542;
						}
					.re2{
						margin-left: 12rpx;
							color: #ff0000;
						}
					
				}
			}
			.pd48 {
				padding: 48rpx 0;
			}
		}
		
		&-tab {
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			.nav {
				
				flex: 1;
				text-align: center;
				position: relative;
				.title {
					padding: 32rpx 0;
				}
				.line {
					border-bottom: 4rpx solid #FB604D;
					width: 80%;
					margin: 0 auto;
					position: absolute;
					bottom: 0;
					right: 50%;
					transform: translateX(50%);
				}
			}
			.act {
				color: #FB604D;
				font-weight: 700;
			}
		}
	}
</style>
